import { Select } from 'antd'
import { CSSProperties } from 'react'
import { IFornItem, IOption } from './interface'
const { Option } = Select;



/**
 * 排序组件
 * **/
interface ISort extends IFornItem<string> {
  cls: string;
  datakey: string;
  style?: CSSProperties,
  sortOption: IOption[]
}


const logicLabelCn = {
  asc: '升序',
  desc: '降序'
}

const defaultOption = [
  {
    label: logicLabelCn.asc,
    value: 'asc',
  },
  {
    label: logicLabelCn.desc,
    value: 'desc',
  },
];


export const Sort = (props: ISort) => {

  function handleChange(value: string) {
    props.onChange({
      [props.datakey]: value
    })
  };
  const cls = props.cls ? props.cls + '-sort' : '';
  const sortOption = props.sortOption ?? defaultOption;

  return <Select
    className={cls}
    placeholder={'请选择'}
    style={{
      minWidth: 60,
      ...props.style
    }}
    defaultValue={props.value ?? 'asc'}
    onChange={handleChange}>
    {
      sortOption.map((item) => {
        return <Option key={item.value} value={item.value}>{item.label}</Option>
      })
    }
  </Select>
}